<template>
  <div class="aa">
    <el-row>
      <el-col :span="2">
        <el-radio-group v-model="type" size="medium" @change="radiochange">
          <el-radio-button
            v-for="(item, index) in typeOption"
            :key="index"
            :label="item.value"
            >{{ item.label }}
          </el-radio-button>
        </el-radio-group>
        <el-button type="primary" size="mini" @click="cleanCanvans">清空</el-button>
      </el-col>
      <el-col :span="20">
        <div id="videobox" class="cc" style="width:400px,height:200px">
          <video id="myvideo" autoplay width="400px" height="300px"></video>

          <div id="canvasbaox" class="bb">
            <canvas
              ref="tagcanvas"
              @mousedown="mouseDown($event)"
              @mouseup="mouseUp($event)"
              @mousemove="mouseMove($event)"
              @contextmenu.prevent="contextMenu($event)"
            ></canvas>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import flvjs from "flv.js";
import { ClickSelectingTool } from 'gojs';

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      type: "L",
      typeOption: [
        // { label: "线", value: "L" },
        { label: "矩形", value: "R" },
        { label: "不规则", value: "A" },
      ],

      player: null,

      //线段的点的集合
      points: [],
      allcans: [
        // {
        //   key: "",
        //   type: "",
        //   pointdata: [],
        //   circledata: [],
        //   isComplete: false,
        // },
      ],
      //可拖动圆圈的点的集合
      circles: [],

      isDragging: false,
      ctx: "",
      x: 0,
      y: 0,
      radius: 5,
      color: "blue",
      isSelected: false,

      index: 0,
      key: 0,

      tagObj: {
        newrecsObj: {},
        recs: [
          // { h: 36, w: 58, x: 404, y: 161 },
          // { h: 67, w: 58, x: 239, y: 49 },
          // { h: 67, w: 58, x: 239, y: 49 },
        ], //两个矩形的宽高与坐标
        x: 0,
        y: 0,
        url: "",
        radious: 5,
        recSize: 5,
        drag: false,
        resize: false,
        draw: false,
        showLitRecs: true,
        index: -1,
        side: 0,
        startX: 0,
        startY: 0,
        isRightClick: false,
      },
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    cleanCanvans(){
      let dom = this.$refs.tagcanvas;
      this.ctx.clearRect(0, 0, dom.width, dom.height);
      this.allcans=[];
      this.circles = [];
        this.points = [];
        this.tagObj.recs=[];
    },
    radiochange(_val) {
      if (_val != "A") {
        if (this.points.length) {
          let cntnow = this.allcans.length || 1;
          cntnow = cntnow + 1;
          let tmp = {
            key: "key" + cntnow,
            type: "A",
            pointdata: Object.assign([], this.points),
            circledata: Object.assign([], this.circles),
            isComplete: true,
          };

          this.allcans.push(tmp);
        }
        this.circles = [];
        this.points = [];
      }
    },
    mouseDown(e) {
      let dom = this.$refs.tagcanvas;

      if (this.type == "L") {
      } else if (this.type == "R") {
        this.createRdown(e, dom);
      } else if (this.type == "A") {
        this.createAdown(e, dom);
      }
    },
    mouseUp(e) {
      let dom = this.$refs.tagcanvas;

      if (this.type == "L") {
      } else if (this.type == "R") {
        this.createRup(e, dom);
      } else if (this.type == "A") {
        this.isDragging = false;
      }
    },
    mouseMove(e) {
      let dom = this.$refs.tagcanvas;

      if (this.type == "L") {
      } else if (this.type == "R") {
        this.createRmove(e, dom);
      } else if (this.type == "A") {
        this.createAmove(e, dom);
      }
    },
    contextMenu(e) {
      window.console.log(e);
      return false;
    },

    /**
     * 绘制矩形,鼠标按下
     */
    createRdown(e, dom) {
      //得到当前鼠标所在的相对位置
      this.tagObj.x = e.offsetX;
      this.tagObj.y = e.offsetY;
      //
      this.tagObj.index = this.getEventIndex(
        this.tagObj.recs,
        this.tagObj.x,
        this.tagObj.y,
        this.tagObj.radious
      ); //得到落点所在框的序数

      //如果是右键
      if (e.button == 2) {
        if (this.tagObj.index >= 0) {
          this.tagObj.isRightClick = true;
        }
        return;
      }
      if (this.tagObj.index >= 0) {
        //移动或者放缩
        this.tagObj.startX = this.tagObj.recs[this.tagObj.index].x;
        this.tagObj.startY = this.tagObj.recs[this.tagObj.index].y;
        this.tagObj.side = this.getEventArea(
          this.tagObj.recs[this.tagObj.index],
          this.tagObj.x,
          this.tagObj.y,
          this.tagObj.radious
        ); //得到落点在一个框中的区域
        // console.log(this.tagObj.side,this.tagObj.index);
        if (this.tagObj.side < 9) {
          //准备缩放
          this.tagObj.resize = true;
        } else {
          //准备拖动
          this.tagObj.drag = true;
        }
        this.drawLitRecs(
          this.ctx,
          this.prepareLitRecs(this.tagObj.recs[this.tagObj.index]),
          this.tagObj.recSize
        ); //画移动小框
      } else {
        this.tagObj.draw = true;
      }
      this.changeResizeCursor(this.$refs.tagcanvas, this.tagObj.side); //判断小框类型
    },

    createRmove(e, dom) {
      var index;
      var side;
      this.clearCanvas(this.$refs.tagcanvas, this.ctx);
      // this.drawRuler(this.$refs.tagcanvas, this.ctx, e);
      // this.drawOldRecs(this.tagObj.recs, this.ctx); //必须放在moveRec之下

      this.restCanvans();

      index = this.getEventIndex(
        this.tagObj.recs,
        e.offsetX,
        e.offsetY,
        this.tagObj.radious
      );
      if (index > -1) {
        side = this.getEventArea(
          this.tagObj.recs[index],
          e.offsetX,
          e.offsetY,
          this.tagObj.radious
        ); //得到落点在一个框中的区域
        // console.log(index,JSON.stringify(this.tagObj.recs),this.tagObj.radious,side);
      } else {
        side = 0;
      }
      this.changeResizeCursor(this.$refs.tagcanvas, side);
      // console.log(this.tagObj.showLitRecs && index >= 0 && side > 0);
      if (this.tagObj.showLitRecs && index >= 0 && side > 0) {
        this.drawLitRecs(
          this.ctx,
          this.prepareLitRecs(this.tagObj.recs[index]),
          this.tagObj.recSize
        );
      }
      if (this.tagObj.draw) {
        this.drawRec(this.$refs.tagcanvas, this.ctx, e);
      }
      if (this.tagObj.drag) {
        // console.log('139',this.$refs.tagcanvas, this.tagObj.recs[this.tagObj.index], e);
        this.moveRec(
          this.$refs.tagcanvas,
          this.tagObj.recs[this.tagObj.index],
          e
        );
      }
      if (this.tagObj.resize) {
        this.reSizeRec(
          this.tagObj.side,
          this.tagObj.recs[this.tagObj.index],
          e.offsetX,
          e.offsetY,
          this.tagObj.recSize
        );
      }
    },
    createRup(e, dom) {
      if (this.tagObj.isRightClick == true) {
        this.tagObj.index = this.getEventIndex(
          this.tagObj.recs,
          this.tagObj.x,
          this.tagObj.y,
          this.tagObj.radious
        );
        this.tagObj.recs.splice(this.tagObj.index, 1);
        this.clearCanvas(this.$refs.tagcanvas, this.ctx);
        // for (var i = 0; i < this.tagObj.recs.length; i++) {
        //   this.ctx.strokeRect(
        //     this.tagObj.recs[i].x,
        //     this.tagObj.recs[i].y,
        //     this.tagObj.recs[i].w,
        //     this.tagObj.recs[i].h
        //   );
        // }
        this.tagObj.isRightClick = false;

        // for (let aindex = 0; this.allcans.length; aindex++) {
        //   let atmp = this.allcans[aindex];
        //   if (atmp.type == "R") {
        //     this.allcans.
        //   }
        // }
        this.moveCanvanDatas("R");
        // debugger;
        let cntnow = this.allcans.length || 1;
        cntnow = cntnow + 1;
        let tmp = {
          key: "key" + cntnow,
          type: this.type,
          pointdata: Object.assign([], this.tagObj.recs),
          isComplete: true,
        };

        this.allcans.push(tmp);

        this.restCanvans();

        return;
      }
      this.tagObj.resize = false;
      this.tagObj.drag = false;
      if (this.tagObj.draw) {
        this.addToRecs(this.$refs.tagcanvas, e); //添加框
        this.tagObj.draw = false;
      }
    },
    /**
     * 绘制 不规则 图形（多边形）
     */
    createAdown(e, dom) {
      if (e.button == 2) {
        //如果是右键，此次画图结束
        let cntnow = this.allcans.length || 1;
        cntnow = cntnow + 1;
        let tmp = {
          key: "key" + cntnow,
          type: this.type,
          pointdata: Object.assign([], this.points),
          circledata: Object.assign([], this.circles),
          isComplete: true,
        };

        this.allcans.push(tmp);

        // debugger;
        this.circles = [];
        this.points = [];
        return;
      }

      var clickX = e.offsetX;
      var clickY = e.offsetY;

      //判断当前点击点是否在已经绘制的圆圈上，如果是执行相关操作，并return，不进入画线的代码
      for (var i = 1; i < this.circles.length; i++) {
        var circle = this.circles[i];
        //使用勾股定理计算这个点与圆心之间的距离
        var distanceFromCenter = Math.sqrt(
          Math.pow(circle.x - clickX, 2) + Math.pow(circle.y - clickY, 2)
        );

        // 如果是其他的点，则设置可以拖动
        if (distanceFromCenter <= circle.radius) {
          // 清除之前选择的圆圈
          this.index = i;
          this.isDragging = true;
          //停止搜索
          return;
        }
      }

      if (this.allcans.length)
        for (var allIndex = 0; allIndex < this.allcans.length; allIndex++) {
          if (this.allcans[allIndex].circledata)
            for (var i = 1; i < this.allcans[allIndex].circledata.length; i++) {
              var circle = this.allcans[allIndex].circledata[i];
              //使用勾股定理计算这个点与圆心之间的距离
              var distanceFromCenter = Math.sqrt(
                Math.pow(circle.x - clickX, 2) + Math.pow(circle.y - clickY, 2)
              );

              // 如果是其他的点，则设置可以拖动
              if (distanceFromCenter <= circle.radius) {
                // 清除之前选择的圆圈
                this.index = i;
                this.key = this.allcans[allIndex].key;
                this.isDragging = true;
                //停止搜索
                return;
              }
            }
        }
      //如果点击新的位置，则进入下面的代码，绘制点
      this.ctx.clearRect(0, 0, dom.width, dom.height);
      this.restCanvans();
      //遍历数组画圆
      var circle = new this.Circle(clickX, clickY);
      this.circles.push(circle);
      this.circles[0].color = "red";
      for (var i = 0; i < this.circles.length; i++) {
        var circle = this.circles[i];
        // 绘制圆圈
        this.ctx.globalAlpha = 0.85;
        this.ctx.beginPath();
        this.ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
        this.ctx.fillStyle = circle.color;
        this.ctx.strokeStyle = "red";//"black";
        this.ctx.fill();
        this.ctx.stroke();
      }
      // 画线
      var point = this.Point(clickX, clickY);
      this.points.push(point);
      this.ctx.beginPath();
      this.ctx.lineWidth = 4;
      //从起始点开始绘制
      this.ctx.moveTo(this.points[0].x, this.points[0].y);
      for (var i = 0; i < this.points.length; i++) {
        this.ctx.lineTo(this.points[i].x, this.points[i].y);
        if (i > 1 && i == this.points.length - 1) {
          this.ctx.lineTo(this.points[0].x, this.points[0].y);
        }
      }
      this.ctx.fillStyle = "rgb(2,100,30)";
      this.ctx.fill();
      this.ctx.strokeStyle = "#9d4dca";
      this.ctx.stroke();
    },
    createAmove(e, dom) {
      let ptmp = {
        x: e.offsetX - dom.offsetLeft,
        y: e.offsetY - dom.offsetTop,
      };
      if (this.allcans.length) {
        for (let aindex = 0; aindex < this.allcans.length; aindex++) {
          let dtmp = this.rayCastingCopy(ptmp, this.allcans[aindex].pointdata);
          // console.log("dtmp==============" + dtmp);
        }
      }

      if (this.points.length) {
        let dtmp = this.rayCastingCopy(ptmp, this.points);
        // console.log("nowdtmp==============" + dtmp);
      }

      // 判断圆圈是否开始拖拽
      if (this.isDragging == true) {
        // 判断拖拽对象是否存在
        // 取得鼠标位置
        var x1 = e.offsetX - dom.offsetLeft;
        var y1 = e.offsetY - dom.offsetTop;
        this.ctx.clearRect(0, 0, dom.width, dom.height);
        //根据上文得到的index设置index点位置随鼠标改变
        if (this.key) {
          let thisCansdata = [];
          for (var ind = 0; ind < this.allcans.length; ind++) {
            let tmpcans = this.allcans[ind];
            if (tmpcans.key == this.key) {
              thisCansdata = Object.assign([], tmpcans);
              tmpcans.circledata[this.index].x = x1;
              tmpcans.circledata[this.index].y = y1;
              tmpcans.pointdata[this.index].x = x1;
              tmpcans.pointdata[this.index].y = y1;
              break;
            }
          }
        } else {
          this.circles[this.index].x = x1;
          this.circles[this.index].y = y1;
          this.points[this.index].x = x1;
          this.points[this.index].y = y1;
          for (var i = 0; i < this.circles.length; i++) {
            var circle = this.circles[i];
            // 绘制圆圈
            this.ctx.globalAlpha = 0.85;
            this.ctx.beginPath();
            this.ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
            this.ctx.fillStyle = "red";//circle.color;
            this.ctx.strokeStyle = "red";//"black";
            this.ctx.fill();
            this.ctx.stroke();
          }
          this.ctx.beginPath();
          this.ctx.moveTo(this.points[0].x, this.points[0].y);
          for (var i = 0; i < this.points.length; i++) {
            this.ctx.lineTo(this.points[i].x, this.points[i].y);
          }
          this.ctx.lineTo(this.points[0].x, this.points[0].y);
          // context.fillStyle="#831f68";
          this.ctx.fillStyle = "rgb(2,100,30)";
          this.ctx.fill();
          this.ctx.strokeStyle = "#9d4dca";
          this.ctx.stroke();
        }

        this.restCanvans();
      }
    },

    Point(x, y) {
      return {
        x: x,
        y: y,
      };
    },
    Circle(x, y) {
      let radiustmp = 5;
      return {
        x: x,
        y: y,
        radius: radiustmp,
        color: "red",
        isSelected: false,
      };
    },

    /**
     * @description 射线法判断点是否在多边形内部
     * @param {Object} p 待判断的点，格式：{ x: X坐标, y: Y坐标 }
     * @param {Array} poly 多边形顶点，数组成员的格式同 p
     * @return {String} 点 p 和多边形 poly 的几何关系
     */
    rayCasting(p, poly) {
      var px = p.x,
        py = p.y,
        flag = false;

      for (var i = 0, l = poly.length, j = l - 1; i < l; j = i, i++) {
        var sx = poly[i].x,
          sy = poly[i].y,
          tx = poly[j].x,
          ty = poly[j].y;

        // 点与多边形顶点重合
        if ((sx === px && sy === py) || (tx === px && ty === py)) {
          return "on";
        }

        // 判断线段两端点是否在射线两侧
        if ((sy < py && ty >= py) || (sy >= py && ty < py)) {
          // 线段上与射线 Y 坐标相同的点的 X 坐标
          var x = sx + ((py - sy) * (tx - sx)) / (ty - sy);

          // 点在多边形的边上
          if (x === px) {
            return "on";
          }

          // 射线穿过多边形的边界
          if (x > px) {
            flag = !flag;
          }
        }
      }

      // 射线穿过多边形边界的次数为奇数时点在多边形内
      return flag ? "in" : "out";
    },
    rayCastingCopy(p, poly) {
      var px = p.x,
        py = p.y,
        flag = false;

      let arcR= 2;
      for (var i = 0, l = poly.length; i < l; i++) {
        var sx = poly[i].x,
          sy = poly[i].y;
        var j = i + 1;
        if (j == poly.length) j = 0;
        var tx = poly[j].x,
          ty = poly[j].y;

        // 点与多边形顶点重合
        if ((sx === px && sy === py) || (tx === px && ty === py)) {
          return "on";
        }

        if (
          ((sx - arcR < px && px < sx + arcR) &&
            (sy - arcR < py && py < sy + arcR)) ||
          (  (tx - arcR < px && tx + arcR > px) && (ty  - arcR <  py && ty  + arcR >  py))
        ) {
          return "on";
        }

        // 判断线段两端点是否在射线两侧
        if ((sy < py && ty >= py) || (sy >= py && ty < py)) {
          // 线段上与射线 Y 坐标相同的点的 X 坐标
          var x = sx + ((py - sy) * (tx - sx)) / (ty - sy);

          // 点在多边形的边上
          if (x === px) {
            return "on";
          }

          // 射线穿过多边形的边界
          if (x > px) {
            flag = !flag;
          }
        }
      }

      // 射线穿过多边形边界的次数为奇数时点在多边形内
      return flag ? "in" : "out";
    },
    moveCanvanDatas(_type) {
      if (!this.allcans.length) {
        return;
      }
      console.log("mv before===="+this.allcans.length);
      for (var ind = this.allcans.length - 1; ind >= 0; ind--) {
        // debugger
        let _nowDatas = this.allcans[ind];
        if (_nowDatas.type == _type) {
          this.allcans.splice(ind, 1);
        }
      }

      console.log("mv end===="+this.allcans.length);
      console.log(this.allcans);
    },
    restCanvans() {
      if (!this.allcans.length) {
        return;
      }
      // debugger;
      for (var ind = 0; ind < this.allcans.length; ind++) {
        let _nowDatas = this.allcans[ind];
        if (_nowDatas.type == "A" && _nowDatas.pointdata.length) {
          for (var i = 0; i < this.allcans[ind].circledata.length; i++) {
            var circle = this.allcans[ind].circledata[i];
            // 绘制圆圈
            this.ctx.globalAlpha = 0.85;
            this.ctx.beginPath();
            this.ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
            // debugger;
            this.ctx.fillStyle = "red";//circle.color;
            this.ctx.strokeStyle = "red"; //"black";
            this.ctx.fill();
            this.ctx.stroke();
          }
          // 画线

          this.ctx.beginPath();
          this.ctx.lineWidth = 4;
          //从起始点开始绘制
          let pointstmp = this.allcans[ind].pointdata;
          this.ctx.moveTo(pointstmp[0].x, pointstmp[0].y);
          for (var i = 0; i < pointstmp.length; i++) {
            this.ctx.lineTo(pointstmp[i].x, pointstmp[i].y);
            if (i > 1 && i == pointstmp.length - 1) {
              this.ctx.lineTo(pointstmp[0].x, pointstmp[0].y);
            }
          }
          // this.ctx.fillStyle = "rgb(2,100,30)";
          this.ctx.fillStyle = "red";
          this.ctx.fill();
          // this.ctx.strokeStyle = "#9d4dca";
          this.ctx.strokeStyle = "red";
          this.ctx.stroke();
        }
        if (_nowDatas.type == "R" && _nowDatas.pointdata.length) {
          let pointstmp = this.allcans[ind].pointdata;
          this.drawOldRecs(pointstmp, this.ctx);
        }
      }
    },

    /**
     * 得到落点所在框的序数，-1代表没有落在任何框内，也就是多个矩形是，点落在哪个里面
     * recs为所有矩形 点的 集合 ，x/y为当前点的位置，
     * ？radious为线宽
     */
    getEventIndex(recs, x, y, radious) {
      //得到落点所在框的序数，-1代表没有落在任何框内 ，  // x初始值为0，y初始值为0
      if (recs.length == 0) {
        return -1;
      }
      for (var i = 0; i < recs.length; i++) {
        if (
          x > recs[i].x - radious &&
          x < recs[i].x + recs[i].w + radious &&
          y > recs[i].y - radious &&
          y < recs[i].y + recs[i].h + radious
        ) {
          return i;
        }
        if (i == recs.length - 1) {
          return -1;
        }
      }
    },
    clearCanvas(canvas, ctx) {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    },

    getEventArea(data, x, y, radious) {
      //得到落点在一个框中的区域
      //也就是说，落在矩形的什么地方，一共9个点，8个点是在边框上（主要用来改变大小），一个是在矩形里面（主要用来移动矩形）
      if (x > data.x - radious && x < data.x + radious) {
        if (y > data.y - radious && y < data.y + radious) {
          return 1;
        } else if (y > data.y + radious && y < data.y + data.h - radious) {
          return 2;
        } else if (
          y > data.y + data.h - radious &&
          y < data.y + data.h + radious
        ) {
          return 3;
        }
      } else if (
        x > data.x + data.w - radious &&
        x < data.x + data.w + radious
      ) {
        if (y > data.y - radious && y < data.y + radious) {
          return 4;
        } else if (y > data.y + radious && y < data.y + data.h - radious) {
          return 5;
        } else if (
          y > data.y + data.h - radious &&
          y < data.y + data.h + radious
        ) {
          return 6;
        }
      } else {
        if (
          y > data.y - radious &&
          y < data.y + radious &&
          x > data.x + radious &&
          x < data.x + data.w - radious
        ) {
          return 7;
        } else if (
          y > data.y + data.h - radious &&
          y < data.y + data.h + radious &&
          x > data.x + radious &&
          x < data.x + data.w - radious
        ) {
          return 8;
        } else {
          return 9;
        }
      }
    },
    drawLitRecs(ctx, data, size) {
      //画移动时的小框,data为矩形框9个点的坐标
      for (var i = 0; i < data.length; i++) {
        ctx.strokeRect(
          data[i][0] - size / 2,
          data[i][1] - size / 2,
          size,
          size
        );
      }
    },
    changeResizeCursor(canvas, index) {
      switch (index) {
        case 0:
          canvas.style.cursor = "crosshair";
          break;
        case 1:
          canvas.style.cursor = "se-resize";
          break;
        case 2:
          canvas.style.cursor = "e-resize";
          break;
        case 3:
          canvas.style.cursor = "ne-resize";
          break;
        case 4:
          canvas.style.cursor = "sw-resize";
          break;
        case 5:
          canvas.style.cursor = "w-resize";
          break;
        case 6:
          canvas.style.cursor = "nw-resize";
          break;
        case 7:
          canvas.style.cursor = "s-resize";
          break;
        case 8:
          canvas.style.cursor = "n-resize";
          break;
        case 9:
          canvas.style.cursor = "move";
          break;
        default:
          canvas.style.cursor = "default";
      }
    },
    addToRecs(canvas, e) {
      var rec = {};
      rec.x = this.tagObj.x > e.offsetX ? e.offsetX : this.tagObj.x;
      rec.y = this.tagObj.y > e.offsetY ? e.offsetY : this.tagObj.y;
      rec.w = Math.abs(e.offsetX - this.tagObj.x);
      rec.h = Math.abs(e.offsetY - this.tagObj.y);
      //rec.type = currentSelectedType;
      this.tagObj.newrecsObj = rec;
      this.tagObj.recs.push(this.tagObj.newrecsObj);

      this.moveCanvanDatas("R");

      let cntnow = this.allcans.length || 1;
      cntnow = cntnow + 1;
      let tmp = {
        key: "key" + cntnow,
        type: this.type,
        pointdata: Object.assign([], this.tagObj.recs),
        // circledata: Object.assign([], this.circles),
        isComplete: true,
      };

      this.allcans.push(tmp);

      this.tagObj.url = this.$refs.tagcanvas.toDataURL();
    },
    //鼠标画图辅助线
    drawRuler(canvas, ctx, e) {
      // //鼠标画图辅助线
      // ctx.beginPath();
      // ctx.strokeStyle = "red";
      // ctx.lineWidth = 1;
      // //ctx.strokeStyle="#FF0000";
      // ctx.moveTo(e.offsetX, 0);
      // ctx.lineTo(e.offsetX, canvas.height);
      // ctx.moveTo(0, e.offsetY);
      // ctx.lineTo(canvas.width, e.offsetY);
      // ctx.stroke();
    },
    prepareLitRecs(data) {
      //把一个框的左上角坐标和宽高输入，得到8个坐标，左3，右3中2
      var li = [];
      li[0] = [data.x, data.y];
      li[1] = [data.x, data.y + data.h / 2];
      li[2] = [data.x, data.y + data.h];
      li[3] = [data.x + data.w, data.y];
      li[4] = [data.x + data.w, data.y + data.h / 2];
      li[5] = [data.x + data.w, data.y + data.h];
      li[6] = [data.x + data.w / 2, data.y];
      li[7] = [data.x + data.w / 2, data.y + data.h];
      return li;
    },
    drawOldRecs(recs, ctx) {
      //已经存在的矩形，也就是已经画出来的矩形
      if (recs.length == 0) {
        return 0;
      }
      // console.log(recs);
      for (var i = 0; i < recs.length; i++) {
        this.ctx.beginPath();
        ctx.lineWidth = 3;
        ctx.strokeStyle = "rgb(121, 245, 57)";
        ctx.strokeRect(recs[i].x, recs[i].y, recs[i].w, recs[i].h);
      }
    },
    drawRec(canvas, ctx, e) {
      //画图，绘制矩形（无填充）。笔触的默认颜色是黑色。
      //使用 strokeStyle 属性来设置笔触的颜色、渐变或模式。
      ctx.strokeRect(
        this.tagObj.x,
        this.tagObj.y,
        e.offsetX - this.tagObj.x,
        e.offsetY - this.tagObj.y
      );
    },
    moveRec(canvas, rec, e) {
      // console.log(canvas, rec,JSON.stringify(rec), e);
      rec.x = this.tagObj.startX + e.offsetX - this.tagObj.x;
      rec.y = this.tagObj.startY + e.offsetY - this.tagObj.y;
    },
    reSizeRec(index, rec, ex, ey, recSize) {
      var temX = rec.x;
      var temY = rec.y;
      if (index < 4 && temX + rec.w - ex > recSize) {
        rec.x = ex;
      }
      if (
        (index == 1 || index == 4 || index == 7) &&
        temY + rec.h - ey > recSize
      ) {
        rec.y = ey;
      }
      if (index < 4) {
        if (temX + rec.w - ex > recSize) {
          rec.w = temX + rec.w - ex;
        }
      } else if (index < 7) {
        if (ex - temX > recSize) {
          rec.w = ex - temX;
        }
      }
      if (index == 1 || index == 4 || index == 7) {
        if (temY + rec.h - ey > recSize) {
          rec.h = temY + rec.h - ey;
        }
      } else if (index == 3 || index == 6 || index == 8) {
        if (ey - temY > recSize) {
          rec.h = ey - temY;
        }
      }
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (flvjs.isSupported()) {
      this.player = flvjs.createPlayer({
        type: "flv",
        isLive: true,
        cors: true,
        url: "http://d.ossrs.net/live/livestream.flv",
      });
    }
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    var video = document.querySelector("#myvideo");
    this.player.attachMediaElement(video);
    this.player.load();
    // this.player.play();

    console.log(video.offsetLeft);
    console.log(video.offsetTop);
    console.log(video.offsetWidth);
    console.log(video.offsetHeight);

    let vanvasbox = document.querySelector("#canvasbaox");

    vanvasbox.style.left = video.offsetLeft;
    vanvasbox.style.top = video.offsetTop;
    vanvasbox.style.width = video.offsetWidth + "px";
    vanvasbox.style.height = video.offsetHeight + "px";

    let dom = this.$refs.tagcanvas;
    dom.width = video.offsetWidth;
    dom.height = video.offsetHeight;

    // debugger;

    this.ctx = this.$refs.tagcanvas.getContext("2d");
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.bb {
  position: absolute;
  /* top: 0%;
    left: 0%;
    width: 100%;
    height: 100%; */
  background-color: transparent;
  z-index: 1001;
  -moz-opacity: 0.7;
  opacity: 0.7;
  filter: alpha(opacity=10);
}
.cc {
  position: relative;
}
canvas {
  position: absolute;
  top: 0;
  left: 0;
}
</style>
